<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>manager</title>

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <!--bootstrap-datetimepicker-->
    <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
    <!--zTree-->
    <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <!--css-->
    <link href="css/manager.css" rel="stylesheet"/>
    <link href="css/directory.css" rel="stylesheet"/>
    <link href="css/folder.css" rel="stylesheet"/>
    <link href="css/info.css" rel="stylesheet"/>
    <link href="css/star.css" rel="stylesheet"/>
    <link href="css/task.css" rel="stylesheet"/>
    <link href="css/msg.css" rel="stylesheet"/>
    <link href="css/loading.css" rel="stylesheet"/>
    <link href="css/accordion.css" rel="stylesheet"/>
    <link href="css/modal.css" rel="stylesheet"/>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--plugs:bootstrap-datetimepicker-->
    <script src="js/plugs_bootstrap-datetimepicker.min.js"></script>
    <script src="js/plugs_bootstrap-datetimepicker.zh-CN.js"></script>
    <!--jquery:cookie-->
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
    <!--zTree-->
    <script src="js/plugs_jquery.ztree.core.min.js"></script>
    <script src="js/plugs_star.js"></script>

</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top ">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header logo">
                <a class="navbar-brand" href="/index"><h1 class="atitle">智能外包</h1></a>

            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="drop-down">
                        <a id="username" href="#"><span th:text="${userName}"></span><span class="caret" id="caret"></span></a>
                        <ul class="drop-down-content">
                            <li><a href="#" >账号管理</a></li>
                            <li><a href="#" >消息</a></li>
                            <li><a th:href="@{/logout}">退出</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div><!-- /.container-fluid -->

    </nav>
    <div class="jumbotron">
        <div class="container">
            <h1>Hi,employer!</h1>
            <p class="jumbotron-text">您可以在这里管理外包人员的资料信息，查看外包项目实时完成情况或发布新项目。</p>
            <!--<p><a class="btn btn-primary btn-lg" href="#fabu" role="button">发布新外包</a></p>-->
        </div>
    </div>
    <div class="row">
        <div class="leftSide col-md-2">
        <div class="personalInfo">
            <a href="#info" class="headPortrait">
                <img src="img/headPortrait.png" id="headPortrait"/>
            </a>
            <div id="nickname">
                <p id="personName" th:text="${userName}"></p>
                <!--<a href="#info" class="manageBtn">账号管理</a>-->
            </div>
        </div>
        <div class="funcList">
            <ul class="funcListUl ">
                <li class="active" id="li_reply_item" ><a href="#apply" id="wb_item" data-toggle="tab">外包申请回复</a></li>
                <li id="li_xx_item"><a href="#info" id="xx_item" data-toggle="tab">人员信息</a></li>
                <li id="li_kq_item"><a href="#kaoqin" id="kq_item" data-toggle="tab">考勤情况</a></li>
                <li id="li_gl_item"><a href="#distribute" id="gl_item" data-toggle="tab">任务发布</a></li>
                <li id="li_gj_item"><a href="#task_state" id="gj_item" data-toggle="tab">任务跟进</a></li>
                <li id="li_fb_item"><a href="#fabu" id="fb_item" data-toggle="tab">发布新外包</a></li>
                <li id="li_zy_item"><a href="#resources" id="zy_item" data-toggle="tab">项目资源</a></li>
            </ul>
        </div>
    </div>
        <div class="mainRight tab-content col-md-offset-1 col-md-8">
            <div class="tab-pane fade in  active" id="apply">
                <ol class="breadcrumb">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">人员管理</a></li>
                    <li class="active">申请批复</li>
                </ol>
                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingOne">
                            <h4 class="panel-title">
                                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                    项目
                                </a>
                            </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                            <div class="panel-body">
                                <table class="table table-hover">
                                    <thead>
                                    <tr>
                                        <th>外包名</th>
                                        <th>项目安全等级</th>
                                        <th>申请人</th>
                                        <th>查看详细信息</th>
                                        <th>批复</th>
                                    </tr>
                                    </thead>
                                    <tbody id="firstBody">
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingTwo">
                            <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    任务
                                </a>
                            </h4>
                        </div>
                        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                            <div class="panel-body">
                                <p>
                                <table class="table table-hover">

                                    <thead>
                                    <tr>
                                        <th>外包</th>
                                        <th>任务名</th>
                                        <th>任务等级</th>
                                        <th>申请人</th>
                                        <th>查看详细信息</th>
                                        <th>批复</th>
                                    </tr>
                                    </thead>
                                    <tbody id="secondBody">
                                    </tbody>
                                </table>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="info">
                <ol class="breadcrumb">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">人员管理</a></li>
                    <li class="active">信息查询</li>
                </ol>
                <div class="panel panel-primary">
                    <!-- Default panel contents -->
                    <div class="panel-heading">外包人员信息登记表</div>

                <!-- Table -->
                <table class="table">
                    <thead>
                    <tr>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>电话</th>
                        <th>负责项目</th>
                        <th>分工细则</th>
                        <th>是否签订保密协议</th>
                        <th>合同签订情况</th>
                    </tr>
                    </thead>
                    <tbody id="tBody">
                    </tbody>
                </table>
            </div>
            </div>
            <div class="tab-pane fade" id="kaoqin">
                <ol class="breadcrumb">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">人员管理</a></li>
                    <li class="active">考勤情况</li>
                </ol>
                <div class="container">
                    <form class="form-inline" role="form">
                            <span>时间段：</span>
                            <div class="form-group">
                                <div class='input-group date'  id='datetimepicker6' >
                                    <input type='text' class="form-control" id="start"/>
                                    <span class="input-group-addon">
                                         <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class='input-group date' id='datetimepicker7' >
                                    <input type='text' class="form-control" id="end"/>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>

                                </div>
                            </div>
                        <button type="button" class="btn btn-primary" id="checkTime">查看</button>
                    </form>

                    </div>
                <table class="table">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>签到时间</th>
                        <th>签退时间</th>
                        <th>总时间</th>
                    </tr>
                    </thead>
                    <tbody id="kBody">

                    </tbody>
                </table>
            </div>
            <div class="tab-pane fade" id="distribute">
                <ol class="breadcrumb">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">项目管理</a></li>
                    <li class="active">任务发布</li>
                </ol>
                <div class="container alist">
                    <button type="button" class="btn btn-lg btn-info addAll">新建任务</button>
                    <form id="task" name="task"></form>


                </div>
            </div>
            <div class="tab-pane fade" id="task_state">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#directory" data-toggle="tab">项目文件夹</a></li>
                    <li id="follow-tab"><a href="#follow" data-toggle="tab">动态</a></li>
                    <li id="chart-tab"><a href="#chart" data-toggle="tab">统计</a></li>
                </ul>
                <div class="tab-content">
                    <div id="directory" class="tab-pane fade in active">
                        <ul id="treeDemo" class="ztree">

                        </ul>
                    </div>
                    <div id="follow" class="tab-pane fade">
                        <!--<div class="my-inline-block text-center">-->
                            <!--<span class="glyphicon glyphicon-folder-close my-folder"></span>-->
                            <!--<span class="folder-name">folder-name1</span>-->
                        <!--</div>-->
                        <!--<div class="my-inline-block text-center">-->
                            <!--<span class="glyphicon glyphicon-folder-close my-folder"></span>-->
                            <!--<span class="folder-name">folder-name2</span>-->
                        <!--</div>-->
                        <!--<div class="my-inline-block text-center">-->
                            <!--<span class="glyphicon glyphicon-folder-close my-folder"></span>-->
                            <!--<span class="folder-name">folder-name3</span>-->
                        <!--</div>-->
                        <!--<script type="text/javascript">-->
                            <!--$(".my-inline-block").click(function() {-->
                                <!--var oDiv=$("#follow");-->
                                <!--var clear = "";-->
                                <!--oDiv.html(clear);-->
                                <!--var project_name = $(this).find(".folder-name").text();-->
                                <!--console.log(project_name);-->
                                <!--var oP = $("<div class='op'></div>");-->
                                <!--//name-->
                                <!--var oH2 = $("<p class='user'><img src='img/emoji" + (parseInt(Math.random() * 5, 10) + 1) + ".png'></p>");-->
                                <!--oH2.append(''+obj['name'] + '&nbsp;&nbsp;&nbsp;&nbsp;');-->
                                <!--oP.append(oH2);-->



                                <!--//info_上传说明-->
                                <!--var oMsg = $("<p class='description'></p>");-->
                                <!--oMsg.append(obj['info'].day);-->
                                <!--oP.append(oMsg);-->

                                <!--//日期-->
                                <!--var oDate = $("<p class='day'></p>");-->
                                <!--oDate.append("时间:"+obj['info'].msg);-->
                                <!--oP.append(oDate);-->
                                <!--oDiv.append(oP);-->
                            <!--});-->
                        <!--</script>-->
                        <!--<div id="pagi-father">-->
                            <!--<div id="pagination">-->
                                <!--<a id="firstPage">首页</a>-->
                                <!--<a id="prePage">上一页</a>-->
                                <!--<a class="current">1</a>-->
                                <!--...-->
                                <!--<a>5</a>-->
                                <!--<a>6</a>-->
                                <!--<a>7</a>-->
                                <!--<a>8</a>-->
                                <!--<a>9</a>-->
                                <!--<a id="nextPage">下一页</a>-->
                                <!--<a id="lastPage">尾页</a>-->
                                <!--<span class="totalPages">-->
            <!--共<span>5</span>页-->
        <!--</span>-->
                                <!--<span class="totalSize">-->
            <!--共<span>90</span>条记录-->
        <!--</span>-->
                            <!--</div>-->
                        <!--</div>-->
                    </div>
                    <div id="chart" class="tab-pane fade">

                    </div>
                </div>

            </div>
            <div class="tab-pane fade" id="fabu">
                <form id="publishForm" enctype="multipart/form-data" name="publishForm">
                    <fieldset>
                        <legend>发布新外包</legend>
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="myName">项目名称</label>
                                    <input class="form-control input-lg" id="myName" name="myName"/>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                <label for="security">项目安全等级</label>
                                <div id="security">
                                    <div class="rating" id = "rating"></div>
                                </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                <label for="content">项目简述</label>
                                <textarea class="form-control" id="content" name="content"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="inputFile">项目计划实施书</label>
                                    <input type="file" id="inputFile" name="inputFile">

                                </div>
                            </div>
                        </div>
                        <div class="row">
                                <div class="col-lg-4">
                                    <div class="form-group">
                                    <label for="enterTime">报名截止时间</label>
                                    <div class="input-group date" id="datetimepicker8">

                                        <input type="text" id="enterTime" name="enterTime" value="" class="form-control" />
                                        <span class="input-group-addon">
                                             <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                    </div>

                                </div>

                                <div class="col-lg-4">
                                    <div class="form-group">
                                    <label for="finishedTime">项目截止时间</label>
                                    <div class="input-group date" id="datetimepicker9">

                                        <input type="text" id="finishedTime" name="finishedTime" value="" class="form-control"/>
                                        <span class="input-group-addon">
                                             <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                    </div>


                                </div>

                        </div>

                        <div class="row">
                            <div class="col-lg-8">
                                <div class="form-group">
                                    <label for="category">技术类别</label>
                                    <div id="category">
                                        <label class="radio-inline">
                                            <input type="radio" value="网站开发" name="category"/>网站开发
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" value="移动开发" name="category"/>移动开发
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" value="微信/小程序开发" name="category"/>微信/小程序开发
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" value="人工智能" name="category"/>人工智能
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" value="算法" name="category"/>算法
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" value="嵌入式系统" name="category"/>嵌入式系统
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" value="其他" name="category"/>其他
                                        </label>
                                    </div>



                                </div>

                            </div>
                        </div>

                        <div class="row">
                                <div class="col-lg-4">
                                    <div class="form-group">
                                    <label for="money">总计项目投资</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="money" name="money"/>
                                            <span class="input-group-addon">RMB</span>
                                        </div>
                                    </div>
                                </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="requirement">要求</label>
                                    <textarea class="form-control" id="requirement" name="requirement"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <input type="hidden" name="publishTime" id="publishTime" value=""/>
                            <input type="hidden" name="publisher" id="publisher" value=""/>
                            <input type="hidden" name="rank" id="rank" value=""/>
                        </div>
                        <button type="submit" value="发布外包" class="btn btn-success" id="mySubmit">
                                    立即发布
                        </button>



                    </fieldset>

                </form>


            </div>
            <div class="tab-pane fade" id="resources">
                <div id="upload" style="width:65%; margin:0 auto; position:relative;">
                    <form id="uploadForm" name="uploadForm" method="post" enctype="multipart/form-data">
                            <div class="form-group">
                                <label for="projectName">项目名</label>
                                <input class="form-control input-lg" name="projectName" id="projectName" type="text"  value="" placeholder="请输入项目名" />
                            </div>
                            <div class="form-group" >
                                <label>任务名</label>
                                <select class="form-control" id="myTaskName" name="myTaskName">
                                    <!--<option>0</option>-->
                                    <!--<option>0</option>-->
                                    <!--<option>0</option>-->
                                </select>
                            </div>
                            <div class="form-group">
                                <label>上传文件</label>
                                <input type="file" name="upl" id="upl" multiple="multiple"  onchange="fileChange(this);" />
                            </div>
                            <div class="text-right">
                                <button type="submit" class="btn btn-success bnt-lg" id="uplBtn">Upload</button>
                            </div>
                    </form>
                    <p id="loading"><img src="img/loading.gif"/></p>
                </div>

            </div>

        </div>
    </div>
    <div class="foot">
        <p class="text-center">Copyright &copy; 2018 智能外包管理平台. All Rights Reserved | Design by <span>杨玉卿&张海洋&田宇</span></p>
    </div>
    <p id="bg"></p>


    <!--js-->
    <script src="../static/js/setRequestHeader.js"></script>
    <script src="js/employer_apply.js"></script>
    <script src="js/employer_information.js"></script>

    <script src="js/employer_attendance.js"></script>

    <script src="js/employer_sendTask.js"></script>

    <script src="js/employer_floderTree.js"></script>
    <script src="js/employer_dynamicState.js"></script>
    <script src="js/employer_progressResult.js"></script>

    <script src="js/employer_publishForm.js"></script>

    <script src="js/employer_uploadSource.js"></script>


</body>
</html>